<template>
  <div>
    <el-form ref="form" :model="form" label-width="150px" :rules="rules">
      <div class="message">方案信息</div>
      <el-form-item class="zuo" label="指标体系" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <div class="message">基本信息</div>
      <el-form-item label="评价方案名称" prop="receptionist">
        <el-input v-model="form.receptionist"></el-input>
      </el-form-item>
      <el-form-item label="评价周期" prop="data">
        <el-input v-model="form.data"></el-input>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="从" prop="value1">
        <el-date-picker
          v-model="form.value1"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="评价方案说明">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="分段方式" prop="region">
        <el-select
          v-model="form.region"
          placeholder="请选择"
          style="width: 100%"
          disabled
        >
          <el-option label="中国建设银行" value="shanghai"></el-option>
          <el-option label="中国人民银行" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>

      <!-- <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item> -->
    </el-form>
    <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->

    <!-- <div class="guding">
        <el-button type="primary" @click="jiayi">下一步</el-button>
        <el-button>取消</el-button>
      </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        data: "",
        value1: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        receptionist: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        receptionist: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        data: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        value1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //   新增弹框
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="scss" scoped>
.message {
  font-size: 20px;
  font-weight: bold;
  margin: 10px;
}
.el-form ::v-deep .el-form-item .el-form-item__label {
  // margin-left: 50px;
}
.el-form ::v-deep .el-form-item .el-form-item__content .el-input__inner {
  width: 100%;
}

.el-form ::v-deep .el-form-item .el-form-item__content .el-textarea__inner {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}
::v-deep .el-button--primary {
  border: 1px solid rgba(126, 163, 255, 0.3);
  color: #ffffff;
  background-color: #363657;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #363657;
  background: rgba(31, 155, 253, 0.2);
  color: #fff;
}
::v-deep .el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}
::v-deep .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}
</style>
